<template>
	<div class="goods">
		<!--1.0版本写法-->
		<!--<div class="menu-wrap" v-el:menu-Wrap>-->	
		<!--2.0版本写法-->
		<div class="menu-wrap" ref="menuWrap">
			<ul>
				<li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
					<span class="text">
						<span v-show="item.type>0" class="icon" :class="classMap[item]"></span>
						{{item.name}}
					</span>
				</li>
			</ul>
		</div>
		<div class="foods-wrap" ref="foodsWrap">
			<ul>
				<li v-for="item in goods" class="food-list food-list-hook">
					<h1 class="food-tit">{{item.name}}</h1>
					<ul>
						<li v-for="food in item.foods" class="food-item">
							<div class="food-icon">
								<img width="57" height="57" :src="food.icon"/>
							</div>
							<div class="food-con">
								<h2 class="food-name">{{food.name}}</h2>
								<p class="desc">{{food.description}}</p>
								<div class="extra">
									<span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
								</div>
								<div class="food-price">
									<span class="now">￥{{food.price}}</span>
									<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
								</div>
								<div class="cartcontrol-wrap1">
									<cartcontrol :food="food"></cartcontrol>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		
		<shopcart :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
	</div>
</template>

<script>
	import BScroll from "better-scroll"
	import shopcart from "../shopcart/shopcart"
	import cartcontrol from "../cartcontrol/cartcontrol"
	
	export default{
		//接收从app.vue传过来的seller对象
		props:{
			seller:{}
		},
		components:{
			shopcart,
			cartcontrol
		},
		data(){
			return {
				goods:[],
				listHeight:[],//每个区间的最大高度
				scrollY:0
			}
		},
		computed:{
			//随时监控
			currentIndex(){
				for(let i=0;i<this.listHeight.length;i++){
					let height1 = this.listHeight[i];
					let height2 = this.listHeight[i+1];
					if(!height2 || (this.scrollY>=height1 && this.scrollY<height2)){
						return i;
					}
				}
				return 0;
			},
			selectFoods(){
				let foods = [];
				this.goods.forEach(function(item){
					item.foods.forEach(function(temp){
						if(temp.count){
							foods.push(temp)
						}
						//console.log(temp)
					})
				})
				return foods;
			}
		},
		created(){
			this.classMap = ['decrease','discount','special','invoice','guarantee'];
			
			this.$http.get('/api/api-goods').then(function(response){
				this.goods = response.body.goods1;
				console.log(this.goods)

				//DOM加载完成后初始化此方法
				this.$nextTick(function(){
					this._initScroll();
					this._calculateHeight();
				})
			})
		},
		methods:{
			selectMenu:function(index,event){
				//非自定义点击事件返回false
				if(!event._constructed){
					return;
				}
				//console.log(index)
				let foodList = this.$refs.foodsWrap.getElementsByClassName('food-list-hook');
				let el = foodList[index];
				this.foodsScroll.scrollToElement(el,100);
			},
			
			_initScroll:function(){
				this.menuScroll = new BScroll(this.$refs.menuWrap,{ 
					click:true
				});
				
				this.foodsScroll = new BScroll(this.$refs.foodsWrap,{
					click:true,
					probeType:3
				});
				
				//滚动时触发
				this.foodsScroll.on('scroll',pos =>{
					this.scrollY = Math.abs(Math.round(pos.y));
					//console.log(pos)
				})
			},
			
			_calculateHeight:function(){
				let foodList = this.$refs.foodsWrap.getElementsByClassName('food-list-hook');
				let height = 0;
				this.listHeight.push(height);
				for(let i=0;i<foodList.length;i++){
					let item = foodList[i];
					height += item.clientHeight;
					this.listHeight.push(height);
				}
			}
			
		}
	}
</script>

<style>
	/*display:flex;左边固定宽度，右边自适应*/
	.goods{
		display: flex;
		position: absolute;
		top: 176px;
		bottom: 46px;
		width: 100%;
		overflow: hidden;
	}
	.menu-wrap{
		flex: 0 1 auto;/*flex:如果存在剩余空间也不放大	如果空间不足将缩小	项目本来的大小*/
		width: 80px;
		background: #f3f5f7;
	}
	.menu-item{
		display: table;
		height: 54px;
		width: 56px;
		padding: 0 12px;
		line-height: 14px;
	}
	.current{
		position: relative;
		margin-top: -1px;
		z-index: 10;
		background: #FFF;
		font-weight: 700;
	}

	.menu-item .icon{
		display: inline-block;
		vertical-align: top;
		width: 12px;
		height: 12px;
		margin-right: 2px;
		background: url(special_3@2x.png) no-repeat;
		background-size: 12px 12px;		
	}
	/*display:table;垂直居中*/
	.menu-item .text{
		display: table-cell;
		vertical-align: middle;		
		font-size: 12px;
		border-bottom: 1px solid rgba(7,17,27,0.1);
	}
	.current .text{
		border-bottom: none;
	}
	.foods-wrap{
		flex: 1;
	}
	.food-tit{
		padding-left: 14px;
		height: 26px;
		line-height: 26px;
		border-left: 2px solid #d9dde1;
		font-size: 12px;
		color: rgb(147,153,159);
		background: #F3F5F7;
	}
	.food-item{
		display: flex;
		margin: 18px;
		padding-bottom: 18px;
		border-bottom: 1px solid rgba(7,17,27,0.1);
	}
	.food-item:last-child{
		border-bottom: none;
		margin-bottom: 0;
	}
	.food-icon{
		flex: 0 0 auto;
		margin-right: 10px;
	}
	.food-con{
		position: relative;
		flex: 1;
	}
	.food-name{
		margin: 2px 0 8px 0;
		height: 14px;
		line-height: 14px;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.food-con .desc,.food-con .extra{
		line-height: 10px;
		font-size: 10px;
		color: rgb(147,153,159);
	}
	.food-con .desc{
		line-height: 12px;
		margin-bottom: 8px;
	}
	.extra .count{
		margin-right: 12px;
	}
	.food-price{
		font-weight: 700;
		line-height: 24px;
	}
	.now{
		margin-right: 8px;
		font-size: 14px;
		color: rgb(240,20,20);
	}
	.old{
		text-decoration: line-through;
		font-size: 10px;
		color: rgb(147,153,159);
	}
	.cartcontrol-wrap1{
		position: absolute;
		right: 0;
		bottom: -7px;
	}
</style>